<template>
  <TransitionGroup name="notification" tag="div" class="notification-container">
    <div
      v-for="notification in notifications"
      :key="notification.id"
      :class="[
        'notification-item',
        `notification-${notification.type || 'info'}`,
        { 'is-closable': notification.showClose }
      ]"
      :style="notification.position ? { position: 'fixed', ...positionStyles[notification.position] } : {}"
    >
      <div class="notification-content">
        <div class="notification-icon" v-if="notification.icon || iconClassMap[notification.type]">
          <i v-if="notification.icon" class="notification-icon-custom"><el-icon><component :is="notification.icon" /></el-icon></i>
          <i v-else :class="['notification-icon-class', iconClassMap[notification.type]]"></i>
        </div>
        <div class="notification-text">
          <div class="notification-title" v-if="notification.title">{{ notification.title }}</div>
          <div class="notification-message">{{ notification.message }}</div>
        </div>
        <button
          v-if="notification.showClose !== false"
          class="notification-close-btn"
          @click="closeNotification(notification.id)"
        >
          <el-icon><Close /></el-icon>
        </button>
      </div>
    </div>
  </TransitionGroup>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { Close } from '@element-plus/icons-vue'
import store from '../store'

const notifications = ref([])

// 位置样式映射
const positionStyles = {
  'top-right': {
    top: '20px',
    right: '20px'
  },
  'top-left': {
    top: '20px',
    left: '20px'
  },
  'bottom-right': {
    bottom: '20px',
    right: '20px'
  },
  'bottom-left': {
    bottom: '20px',
    left: '20px'
  },
  'top-center': {
    top: '20px',
    left: '50%',
    transform: 'translateX(-50%)'
  },
  'bottom-center': {
    bottom: '20px',
    left: '50%',
    transform: 'translateX(-50%)'
  }
}

// 图标类名映射
const iconClassMap = {
  success: 'el-icon-circle-check',
  warning: 'el-icon-warning',
  error: 'el-icon-circle-close',
  info: 'el-icon-info'
}

// 关闭通知
const closeNotification = (id) => {
  store.actions.removeNotification(id)
}

// 监听通知变化
const updateNotifications = () => {
  notifications.value = [...store.state.notifications].map(notification => ({
    ...notification,
    icon: notification.icon || iconClassMap[notification.type]
  }))
}

// 监听store中的通知变化
let notificationWatcher = null

onMounted(() => {
  updateNotifications()
  // 每秒更新一次，避免频繁更新DOM
  notificationWatcher = setInterval(updateNotifications, 1000)
})

onUnmounted(() => {
  if (notificationWatcher) {
    clearInterval(notificationWatcher)
  }
})
</script>

<style scoped>
.notification-container {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
}

.notification-item {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 12px 16px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
  min-width: 280px;
}

.notification-item.is-closable {
  padding-right: 35px;
}

.notification-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.notification-icon {
  margin-right: 10px;
  font-size: 16px;
  flex-shrink: 0;
}

.notification-text {
  flex: 1;
  overflow: hidden;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #303133;
}

.notification-message {
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
  word-wrap: break-word;
}

.notification-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: #c0c4cc;
  cursor: pointer;
  padding: 4px;
  border-radius: 2px;
  font-size: 14px;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-close-btn:hover {
  color: #909399;
  background-color: #f5f7fa;
}

/* 不同类型的通知样式 */
.notification-success {
  border-color: #f0f9eb;
  background-color: #f0f9eb;
}

.notification-success .notification-icon {
  color: #67c23a;
}

.notification-warning {
  border-color: #fdf6ec;
  background-color: #fdf6ec;
}

.notification-warning .notification-icon {
  color: #e6a23c;
}

.notification-error {
  border-color: #fef0f0;
  background-color: #fef0f0;
}

.notification-error .notification-icon {
  color: #f56c6c;
}

.notification-info {
  border-color: #edf2fc;
  background-color: #edf2fc;
}

.notification-info .notification-icon {
  color: #909399;
}

/* 动画效果 */
.notification-enter-active,
.notification-leave-active {
  transition: all 0.3s ease;
}

.notification-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.notification-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.notification-move {
  transition: transform 0.3s ease;
}
</style>